Service Worker 마스터하기: 백그라운드 동기화 심층 분석

            
  navigator.serviceWorker.ready.then(function(swRegistration) {
    return swRegistration.sync.register('my-sync');
  }).then(function() {
    console.log('Sync registered!');
  }).catch(function() {
    console.log('Sync registration failed!');
  });

            

              
                Copy
              
            
          

            
  self.addEventListener('sync', function(event) {
    if (event.tag === 'my-sync') {
      event.waitUntil(
        doSomeStuff()
      );
    }
  });

  function doSomeStuff() {
    return new Promise(function(resolve, reject) {
        // Perform the actual sync logic here
        // Example: send data to a server
        fetch('/api/data', {
          method: 'POST',
          body: JSON.stringify({data: 'some data'})
        }).then(function(response) {
          if (response.ok) {
            console.log('Sync successful!');
            resolve();
          } else {
            console.error('Sync failed:', response.status);
            reject();
          }
        }).catch(function(error) {
          console.error('Sync error:', error);
          reject();
        });
    });
  }

            

              
                Copy
              
            
          

            
  // Function to store form data in IndexedDB
  function storeFormData(data) {
    return new Promise(function(resolve, reject) {
      let request = indexedDB.open('my-db', 1);

      request.onerror = function(event) {
        console.error('IndexedDB error:', event);
        reject(event);
      };

      request.onupgradeneeded = function(event) {
        let db = event.target.result;
        let objectStore = db.createObjectStore('form-data', { keyPath: 'id', autoIncrement: true });
      };

      request.onsuccess = function(event) {
        let db = event.target.result;
        let transaction = db.transaction(['form-data'], 'readwrite');
        let objectStore = transaction.objectStore('form-data');

        let addRequest = objectStore.add(data);

        addRequest.onsuccess = function(event) {
          console.log('Form data stored in IndexedDB');
          resolve();
        };

        addRequest.onerror = function(event) {
          console.error('Error storing form data:', event);
          reject(event);
        };

        transaction.oncomplete = function() {
          db.close();
        };
      };
    });
  }

  // Function to retrieve all form data from IndexedDB
  function getAllFormData() {
    return new Promise(function(resolve, reject) {
      let request = indexedDB.open('my-db', 1);

      request.onerror = function(event) {
        console.error('IndexedDB error:', event);
        reject(event);
      };

      request.onsuccess = function(event) {
        let db = event.target.result;
        let transaction = db.transaction(['form-data'], 'readonly');
        let objectStore = transaction.objectStore('form-data');
        let getAllRequest = objectStore.getAll();

        getAllRequest.onsuccess = function(event) {
          let formData = event.target.result;
          resolve(formData);
        };

        getAllRequest.onerror = function(event) {
          console.error('Error retrieving form data:', event);
          reject(event);
        };

        transaction.oncomplete = function() {
          db.close();
        };
      };
    });
  }

  // Example usage: when the form is submitted
  document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault();

    let formData = {
      name: document.getElementById('name').value,
      email: document.getElementById('email').value,
      message: document.getElementById('message').value
    };

    storeFormData(formData)
      .then(function() {
        // Optionally, register a sync event to send the data later
        navigator.serviceWorker.ready.then(function(swRegistration) {
          return swRegistration.sync.register('form-submission');
        });
      })
      .catch(function(error) {
        console.error('Error storing form data:', error);
      });
  });

            

              
                Copy
              
            
          

            
  self.addEventListener('sync', function(event) {
    if (event.tag === 'form-submission') {
      event.waitUntil(
        getAllFormData()
          .then(function(formData) {
            // Send each form data to the server
            return Promise.all(formData.map(function(data) {
              return fetch('/api/form-submission', {
                method: 'POST',
                body: JSON.stringify(data),
                headers: {
                  'Content-Type': 'application/json'
                }
              })
              .then(function(response) {
                if (response.ok) {
                  // Data sent successfully, remove it from IndexedDB
                  return deleteFormData(data.id);
                } else {
                  console.error('Failed to send form data:', response.status);
                  throw new Error('Failed to send form data'); // This will trigger a retry
                }
              });
            }));
          })
          .then(function() {
            console.log('All form data synced successfully!');
          })
          .catch(function(error) {
            console.error('Error syncing form data:', error);
          })
      );
    }
  });

  function deleteFormData(id) {
    return new Promise(function(resolve, reject) {
        let request = indexedDB.open('my-db', 1);

        request.onerror = function(event) {
          console.error('IndexedDB error:', event);
          reject(event);
        };

        request.onsuccess = function(event) {
          let db = event.target.result;
          let transaction = db.transaction(['form-data'], 'readwrite');
          let objectStore = transaction.objectStore('form-data');
          let deleteRequest = objectStore.delete(id);

          deleteRequest.onsuccess = function(event) {
            console.log('Form data deleted from IndexedDB');
            resolve();
          };

          deleteRequest.onerror = function(event) {
            console.error('Error deleting form data:', event);
            reject(event);
          };

          transaction.oncomplete = function() {
            db.close();
          };
        };
    });
  }

            

              
                Copy
              
            
          

            
  navigator.serviceWorker.ready.then(function(swRegistration) {
    return swRegistration.periodicSync.register('periodic-sync', {
      minInterval: 24 * 60 * 60 * 1000, // 1 day
    });
  });

            

              
                Copy
              
            
          

            
  self.addEventListener('periodicsync', function(event) {
    if (event.tag === 'periodic-sync') {
      event.waitUntil(
        // Perform the periodic sync task
        updateNewsHeadlines()
      );
    }
  });

            

              
                Copy
              
            
          

            
  window.addEventListener('online',  function(e) {
    console.log("Went online");
  });

  window.addEventListener('offline', function(e) {
    console.log("Went offline");
  });

            

              
                Copy